<template>
  <div>
    <div id="mainkpg">
    </div>
    <p style="font-size:0.4rem;">force05</p>
  </div>

</template>

<script>
  export default{
    props:['datak'],
    data(){
      return{
        tabledata:[],
        tabledataya:[],//x轴参数
        tabledatayc:[],//y轴参数
        tabledatayb:[],//离枕时间
      }
    },
    created() {
      //用于px转换rem，echarts读取不到rem，所以这里要换算
      var d = document.documentElement;
      var cw = d.clientWidth || 750;
      document.documentElement.style.fontSize = (cw/750 * 100) + 'px';
      this.getLoading();
    },
    mounted() {
      this.showCharts()
    },
    methods:{
      getLoading(){
        var that=this;
        that.tabledata=that.datak;
        let ag=that.tabledata;
        that.tabledataya=[];//这是x轴数据,例:“22：00”
        that.tabledatayc=[];//这是y轴显示百分比的地方,例:10%
        that.tabledatayb=[];//这是离枕时间
        for(var i=0;i<ag.length;i++){
          that.tabledataya.push(ag[i].yb)//这是x轴数据
          that.tabledatayc.push(ag[i].ya)//这是y轴显示百分比的地方
          that.tabledatayb.push(ag[i].yc)//这是离枕时间
        }

      },
      //rem转换px
      remToPx(rem) {
        var fontSize = document.documentElement.style.fontSize;
        return Math.floor(rem * fontSize.replace('px', ''));
      },
      showCharts(){

         // 基于准备好的dom，初始化echarts实例,采用svg渲染
         var myChart = this.$echarts.init(document.getElementById('mainkpg'),null, {renderer: 'svg'});

         // 绘制图表,注意有值为0要判断改为’-‘
         var data = this.tabledatayc;
         var titlename = this.tabledataya;
         var dataH = this.tabledatayb;


         //markPoint-------根据data值决定标注位置
         var markdata=[];//用于标注的值
         for(var i=0;i<dataH.length;i++){
           var markdatals={
             xAxis:"", yAxis:""
           }
           if(dataH[i]!='-'){
             console.log(i)
              markdatals.xAxis=i;
              markdatals.yAxis=parseInt(dataH[i])/2;
              markdata.push(markdatals);
           }
         }
         // -------结束

         var option = {
             calculable:false,
             // tooltip: {
             //       trigger: 'item',
             //       // triggerOn: 'mousemove|click',
             //       alwaysShowContent:false,
             //       axisPointer: {
             //         type: 'shadow'
             //       },
             //       // formatter:function(dataH){
             //       //   if(dataH.seriesName=='frontD'){
             //       //     return "离枕时间"+dataH.value+"分钟";
             //       //   }
             //       // },
             //       position:"top",
             //     },
             grid: {
                     left: this.remToPx(0.3),
                     top: '12%',
                     right: this.remToPx(0.3),
                     bottom: '15%',
                     containLabel:false,
                 },
              backgroundColor: '#0f2e6f',
              dataZoom: [
                {
                    type: 'inside',
                    throttle:'50',
                    minValueSpan:9,
                    start: 0,
                    end: this.remToPx(0.15),
                }
              ],
             xAxis: {
                 type: 'category',
                 // boundaryGap: false,
                 data: titlename,
                 axisLabel: {
                     textStyle: {
                       color:'#5c79b5',
                       fontSize:this.remToPx(0.28),
                     },
                     margin:this.remToPx(0.15),
                 },
                 axisLine:{
                   lineStyle:{
                     color:"#000000",
                   }
                 },
                 axisTick:{
                   alignWithLabel :true,
                 },
                 triggerEvent:false,


             },
             yAxis: [
                     {
                         type: 'value',
                         show: false
                     }
                 ],
             series: [
             {
               symbolSize:this.remToPx(0.3),//如果数据为0，采用“-”代替’0‘
               data:dataH,
               symbolOffset:['-65%','-50%'],
               name: 'frontD',
               type: 'scatter',

               // hoverAnimation:false,
               symbol:"path://M38.634 2.586 C 19.912 7.118,4.700 23.800,1.717 43.072 C -3.318 75.602,25.398 104.318,57.928 99.283 C 78.844 96.045,96.034 78.915,99.256 58.099 C 104.612 23.498,72.757 -5.673,38.634 2.586 Z,M55.685 35.064 C 59.675 36.571,63.767 40.765,65.054 44.665 L 66.155 48.000 81.078 48.000 L 96.000 48.000 96.000 50.500 L 96.000 53.000 81.013 53.000 L 66.027 53.000 64.649 56.297 C 59.380 68.909,40.620 68.909,35.351 56.297 L 33.973 53.000 18.987 53.000 L 4.000 53.000 4.000 50.500 L 4.000 48.000 18.922 48.000 L 33.845 48.000 34.946 44.665 C 37.646 36.482,47.440 31.948,55.685 35.064 Z",
               itemStyle:{
                 opacity:9,

                 color:"#456ddd",
               },
               label: {
                 normal: {
                   show: true,
                   formatter:'{c}分钟',
                   color: '#00E4FF',
                   fontSize:this.remToPx(0.22),
                   borderWidth: 10,
                   distance: 10,
                   align: 'center',
                   verticalAlign: 'middle',
                   borderRadius: 1,
                   borderColor: '#E8A61F',
                   backgroundColor: '#E8A61F',
                   position: 'top',
                 },
               },
             },
               {
                 name: 'frontA',
                 type: 'bar',
                 data: dataH,
                 barWidth :this.remToPx(0.05),
                 // barCategoryGap :"120%",
                 barGap :this.remToPx(0.2),
                 itemStyle: {
                     normal: {
                         color:"#0f2e6f",
                         borderColor:"#33d0e9",
                         borderWidth :this.remToPx(0.03),

                     }
                 },
               },
               {
                 name: 'frontB',
                 type: 'bar',
                 data: data,
                 barWidth :this.remToPx(0.2),
                 barCategoryGap :"40%",
                 barGap :this.remToPx(0.1),
                 itemStyle: {
                     normal: {
                         color:function(data){
                           if(data.value<=20){
                              return "#1a8595";
                           }
                           else if(data.value>20 && data.value<30){
                             return "#1b808a";
                           }else if(data.value>=30 && data.value<50){
                             return "#ccdc9b";
                           }else if(data.value>=50 && data.value<100){
                             return "#eb5255";
                           }

                         },
                         barBorderRadius: this.remToPx(0.8),
                     }
                 },

             },

             ],
             animationEasing: 'elasticOut',
             animationEasingUpdate: 'elasticOut',
             animationDelay: function (idx) {
                 return idx * 20;
             },
             animationDelayUpdate: function (idx) {
                 return idx * 20;
             }
         };


         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
      }
    }
  }
</script>

<style>
  #mainkpg{
    width:100%;height:4.8rem;float:left;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }
  body{
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
   }
</style>
